
<template>
    <div id="ask_bd">
        <div class="ask">
            <div class="author">
                <div class="avatar_img">
                    <img :src="anwser.avatar">
                </div>
                <div class="username">
                    <span class="usernames">{{anwser.username}}</span>
                    <span>{{anwser.ctime}}</span>
                </div>
            </div>
            <div class="cont">{{anwser.content}}</div>
        </div>
        <div class="zixun">

            <div class="zixun_desc">
                <p class="zixun_tle">{{pro.title}}</p>
                <p class="zixun_summary">{{pro.summary}}</p>
                <p class="zixun_bt">
                    <span>{{pro.author}}</span>
                    <span>{{pro.ctime}}</span>
                </p>
            </div>
            <div class="zixun_img">
                <img :src="pro.logo">
            </div>
        </div>
        <div id="commentBox">
            <div class="comment" v-for="list in comment" :key="list.comment">
                <div class="avtar">
                    <img :src="list.avatar" width="36" height="36" class="avtar_img">
                    <img src="../assets/talk.png" class="talk">
                </div>
                <div class="comment-content">
                    <p class="avtar-name">
                        <span>{{list.username}}</span>
                    </p>
                    <p class="comments">
                        {{list.content}}
                    </p>

                    <p class="comment-time">
                        <span>{{list.ctime}}</span> ·
                        <span>回复&gt; </span>
                    </p>
                </div>
            </div>
        </div>
        <ul class="ul-pic" style="padding:0 10px;margin-bottom:10px">
            <router-link :to="{ name:'videos', params: {id: 123} }" class="open">查看更多，下载天化云应用</router-link>
        </ul>
    </div>
</template>
<style>

</style>


<script>
function GetQueryString(name) {  
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");  
    var r = window.location.search.substr(1).match(reg);  //获取url中"?"符后的字符串并正则匹配
    var context = "";  
    if (r != null)  
         context = r[2];  
    reg = null;  
    r = null;  
    return context == null || context == "" || context == "undefined" ? "" : context;  
}
// window.onload=function(){
//     var sb=GetQueryString('id');
//     console.log(sb)
// }
export default {
    name: 'app',
    data() {
        return {
            comment: [],
            anwser: [],
            pro: [],
            id:this.$route.query.id
        }
    },
    mounted() {
        //var id=4;
        this.loadAnwser();
        this.loadComment();
       // this.GetQueryString('id');
        //console.log(sb)
        console.log(this.$route.query.id);
        console.log(this.$route.query);
        var sb=this.$route.query;
        console.log(sb.user_id);
    },
    methods: {
        loadAnwser: function() {
            var id=this.id;
            this.$http.get('http://thy.588net.com/index.php/question/Question/postInfo?' + 'id=' + id).then(function(res) {
                this.anwser = res.body.data;
                this.pro = res.body.data.product;
            })
        },
        loadComment: function() {
            this.$http.get('http://thy.588net.com/index.php/question/Question/getPostList?' + '&page=' + 1 + '&page_size=' + 8).then(function(res) {
                this.comment = res.body.data;

            })
        },

    },
}
</script>

<style scoped>
.cont {
    padding: 10px;
}

.title {
    padding: 10px
}

.avatar_img {
    width: 36px;
    margin-right: 10px;
    float: left
}

.avatar_img img {
    width: 36px;
    height: 36px;
    border-radius: 18px
}

#ask_bd {
    padding-top: 60px
}

.author {
    overflow: hidden;
    padding: 0 10px;
}

.usernames {
    margin-right: 15px
}

.username {
    float: left;
    height: 36px;
    line-height: 36px
}

.comments img:nth-of-type(3n) {
    margin-right: 0;
}

.zixun_bt {
    overflow: hidden;
    font-size: 12px;
    color:#a5a5a5;
}

.zixun_bt span:nth-of-type(2) {
    float: right;
}

.avtar {
    margin-right: 10px;
    width: 36px
}

.zixun {
    display: flex;
    flex-direction: row;
    border: 1px solid #d8d8d8;
    justify-content: space-between;
    height: 90px;
    margin: 0 10px;
    padding: 10px;
    position: relative;
    background: #f5f5f5
}
.comment:nth-of-type(1){
    border-top:0px solid #fff;
}
.open {
    display: block;
    margin-top: 30px;
    height: 37px;
    line-height: 37px;
    text-align: center;
    background: #307ed7;
    color: #fff;
    font-size: 13px;
    border-radius: 4px;
}

.zixun_img {
    width: 140px;
    height: 90px;
    overflow: hidden;
    margin-left: 10px;
}

.zixun_img img {
    width: 140px;
    height: 90px;
}

.zixun_tle {
    color: #5a5a5a;
    font-size: 16px;
    height: 30px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis
}

.zixun_summary {
    color: #5a5a5a;
    font-size: 16px;
     overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis
}

.zixun_desc {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 90px;
    width: 62%
}


.comment {
    border-top: 1px solid #d8d8d8;
    color: #5a5a5a;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    overflow: hidden;
    padding: 10px;
}

.avtar_img {
    width: 36px;
    height: 36px;
    border-radius: 18px;
}

.talk {
    width: 20px;
    height: 20px;
    float: right;
}

.comment-content {
    width: 100%;
}

.avtar-name {
    height: 36px;
    line-height: 36px;
    font-size: 12px;

    overflow: hidden;
    color: #5a5a5a;
}

.avtar-name span:nth-of-type(1) {
    display: inline-block;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    float: left;
}

.comments {
    text-align: justify;
    font-size: 14px;
    line-height: 24px;
    color: #5A5A5A;
    overflow: hidden;
}

.comments img {
    width: 31.6%;
    margin-right: 2.6%;
    float: left;
    height: 60px;
}

.comment-time {
    font-size: 12px;
    color: gray;
    margin-top: 6px;
    height: 1rem;
    line-height: 20px;
}
</style>

